<template>
  <d2-container>
       <el-button size="small" @click="printBtn()">打印</el-button>
    <el-table
          border
          :data="first_tableData"
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
          style="width: 100%"
          class="dialogCare"
        >
          <el-table-column
            label="序号"
            type="index"
            width="50"
          ></el-table-column>
          <el-table-column prop="match_id" label="匹配ID"></el-table-column>
          <el-table-column prop="match_name" label="匹配名称"></el-table-column>
          <el-table-column prop="strategy_id" label="策略ID"></el-table-column>
          <el-table-column
            prop="strategy_name"
            label="策略名称"
          ></el-table-column>
          <el-table-column prop="creator_name" label="创建人"></el-table-column>
          <el-table-column
            prop="create_date"
            label="创建日期"
          ></el-table-column>  
        </el-table>
         <el-table
          border
          :data="first_tableData"
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
          style="width: 100%"
          class="dialogCare"
        >
          <el-table-column label="现货信息">
            <el-table-column
              prop="commodity_name"
              label="品名"
            ></el-table-column>
            <el-table-column
              prop="exposure_no"
              label="敞口号"
            ></el-table-column>
            <el-table-column prop="directionS" label="方向"></el-table-column>
            <el-table-column
              prop="match_amount"
              label="匹配数量"
            ></el-table-column>
            <el-table-column
              prop="commodity_unitS"
              label="单位"
            ></el-table-column>
            <el-table-column prop="priceS" label="价格"></el-table-column>
            <el-table-column prop="currencyS" label="币种"></el-table-column>
          </el-table-column>
          <el-table-column label="衍生品信息">
            <el-table-column prop="productName" label="品名"></el-table-column>
            <el-table-column prop="tradeID" label="成交ID"></el-table-column>
            <el-table-column prop="instrumentID" label="合约"></el-table-column>
            <el-table-column prop="direction" label="方向"></el-table-column>
            <el-table-column prop="offsetFlag" label="开平"></el-table-column>
            <el-table-column
              prop="match_volume"
              label="匹配手数"
            ></el-table-column>
            <el-table-column
              prop="commodity_unit"
              label="单位"
            ></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="currency" label="币种"></el-table-column>
          </el-table-column>
        </el-table>
  </d2-container>
</template>
<script>
import {getReport_match_info} from '@/api/url'
export default {
    data() {
    return {
      activeName: "first",
      //第一块
      first_form: {
        type: "strategy",
        match_id: "",
        match_name: "",
        strategy_id: "",
        strategy_name: "",
        creator: "",
        create_date: "",
        page: 1,
        pageSize: 20,
        pageTotal: 0
      },
      select_datas_first: [],
      first_tableData: []
    };
  },
  created(){
this.first_select_data();
 },
 methods:{
     first_select_data() {
      getReport_match_info(this.first_form).then(res => {
        this.first_tableData = res.result.results;
        this.first_form.pageTotal = res.result.count;
      });
    },
    printBtn(){
      let newstr = document.getElementsByClassName('dialogCare')[1].innerHTML;
      console.log(newstr)
      window.document.body.innerHTML = newstr;
      let oldstr = window.document.body.innerHTML;
      window.print();
      window.location.reload();   //解决打印之后按钮失效的问题
      window.document.body.innerHTML = oldstr;
      return false;
    }
 }
}
</script>
